import React, {useCallback, useMemo, useState} from 'react'
import {
  Editable,
  Slate,
  withReact,
} from 'slate-react'
import {createEditor} from 'slate'
import {withHistory} from 'slate-history'
import {Element} from "./elements";
import {Leaf} from "./LeafNodes";
import {withShortcuts} from './commands/withShortcuts';
import {editorEventHandler} from './commands/editorEventHandler'
import Toolbar from './Toolbar';
import PopupMenu from './elements/PopupMenu'
import './App.css';
// import {bindDragEventToDom} from './drag/index';

const initialValue = [
  {
    type: 'heading-two',
    children: [
      {
        text: 'React'
      }
    ]
  },
  {
    type: 'paragraph',
    children: [
      {
        text: '仓库：https://github.com'
      }
    ]
  },
  {
    type: 'paragraph',
    children: [
      {
        text: '亮点：基于块编辑，可以自由列组合拖动'
      }
    ]
  },
  {
    type: 'paragraph',
    children: [
      {
        text: ''
      }
    ]
  },
    // {
    //   type: 'image',
    //   url: 'https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png',
    //   children: [{text: ''}],
    //   void: true
    // },
  {
    type: 'todo-list',
    children: [
      {
        type: 'todo-item',
        value: {
          checked: false,
          endTime: '2021-01-21'
        },
        children: [{text: '做一道菜'}]
      },
      {
        type: 'todo-item',
        value: {
          checked: true,
          endTime: '2021-01-05'
        },
        children: [{text: '完成富文本编辑器基本功能'}]
      }
    ]
  },
  {
    children: [
      {
        text:
          'Since the editor is based on a recursive tree model, similar to an HTML document, you can create complex nested structures, like tables:',
      },
    ],
  },
  {
    type: 'table',
    children: [
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '' }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Human', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Dog', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: 'Cat', bold: true }],
          },
        ],
      },
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '# of Feet', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: '2' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '4' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '4' }],
          },
        ],
      },
      {
        type: 'table-row',
        children: [
          {
            type: 'table-cell',
            children: [{ text: '# of Lives', bold: true }],
          },
          {
            type: 'table-cell',
            children: [{ text: '1' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '1' }],
          },
          {
            type: 'table-cell',
            children: [{ text: '9' }],
          },
        ],
      },
    ],
  },
  {
    children: [
      {
        text:
          "This table is just a basic example of rendering a table, and it doesn't have fancy functionality. But you could augment it to add support for navigating with arrow keys, displaying table headers, adding column and rows, or even formulas if you wanted to get really crazy!",
      },
    ],
  },
];

const App = () => {
  const [value, setValue] = useState(initialValue);
  const editor = useMemo(
    () => withShortcuts(withReact(withHistory(createEditor()))),
    []
  );
  // useEffect(()=>{
  //   bindDragEventToDom(document.querySelector('.content-editor > div'), editor)
  // }, [editor]);

  const renderElement = useCallback(props => <Element {...props} editor={editor}/>, [editor]);
  const renderLeaf = useCallback((props) => <Leaf {...props} />, []);

  return (
    <div className={"max-editor-content"}>
      <Slate editor={editor} value={value} onChange={value => {
        setValue(value)
      }}>
        <div className="toolbar">
          <Toolbar />
        </div>
        <div className={"content-editor"}>
          <PopupMenu />
          <Editable
            renderElement={renderElement}
            placeholder="Write some markdown..."
            renderLeaf={renderLeaf}
            onKeyDown={event=>{
              editorEventHandler('onKeyDown', event, editor)
            }}
          />
        </div>
      </Slate>
    </div>
  );
};

export default App;
